<script lang="ts">
    import { useClassList } from "../utils/useClassList";
    import { useStyle } from "../utils/useStyle";
    import type { SkeletonProps } from "./Skeleton";

    const props: SkeletonProps = $props();
    const classList = $derived(
        useClassList(props, "cm-skeleton", {
            "cm-skeleton-active": props.active,
        })
    );

    const style = $derived(
        useStyle(props, {
            width: props.width,
            height: props.height,
        })
    );
</script>

{#if props.loading}
    <div class={classList} {style}>
        {@render props.placeholder?.()}
    </div>
{:else}
    {@render props.children?.()}
{/if}
